<template>
    <div style="max-height: 85vh;overflow-y: auto">
        <div v-for="userInfo in followedUserInfoList" :key="userInfo.id">
            <FollowItemView style="cursor: pointer;" @click="$router.push(`/home/userInfo/${userInfo.id}`)" :userInfo="userInfo"></FollowItemView>
            <div style="margin-left: 90%;">
                <el-button @click="unFollowed(userInfo.id)" style="margin-top: 40%;height: 100px;" type="danger" plain >取消关注</el-button>
            </div>
        </div>


    </div>

    <el-dialog v-model="showLoginView" width="800" style="height: 500px;border-radius: 20px;background: linear-gradient(to bottom, #fbf0f2 10%, #ffffff);color: black;" center>
        <template #header>
            <h2 style="margin-top: 0px;">登录</h2>
        </template>
        <LoginView></LoginView> 
    </el-dialog>
</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import FollowItemView from './followItemView.vue'
    import FollowedUserInfo from '@/types/user/FollowUserInfo'
    import request from '@/base/request';
    import { ElMessage } from 'element-plus';
    import LoginView from '@/components/home/loginView.vue'
    const showLoginView=ref(false)

    onMounted(()=>{
        getFollowedUserInfoList()
    })

    const followedUserInfoList=ref<Array<FollowedUserInfo>>()

    const getFollowedUserInfoList=async()=>{
        const response= (await request.get("/user/userFollowed/getFollowedUserInfoList")).data
        if(response.code==200){
            followedUserInfoList.value=response.data
        }else if(response.msg==="未能读取到有效 token"){
            ElMessage.error("尚未登录")
            showLoginView.value=true
        }else{
            ElMessage.error(response.msg)
        }
    }

    const unFollowed=async(userId)=>{
        const response= (await request.delete(`/user/userFollowed/unFollowed?userId=${userId}`)).data
        if(response.code==200){
            getFollowedUserInfoList()
        }else{
            ElMessage.error(response.msg)
        }
    }
</script>


<style scoped>

</style>